<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-3.6.0.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/vue.global.js"></script>
    <script type="text/javascript">
        $(function(){
            const app = Vue.createApp({})
            app.component('custom',{
                template:'<p>这是一个十分普通的标签</p>'
            })
            app.mount('#app');

            const app2 = Vue.createApp({})
            app2.component('custom2',{
                data(){
                    return{
                        count:0
                    }
                },
                template:`
                <br>
                <button @click="count++">
                    按了 {{count}}下!
                </button>`
            })
            app2.mount('#app2')

            var custom_3 = {
              template: '<h1>自定义组件1</h1>'
            }
            var custom_4 = {
              template: '<h2>自定义组件2</h2>'
            }
            var custom_5 = {
              template: '<h3>自定义组件3</h3>'
            }
            const app3 = Vue.createApp({
                components:{
                    'custom3':custom_3,
                    'custom4':custom_4,
                    'custom5':custom_5
                }
            })
            app3.mount('#app3')

            const app4 = Vue.createApp({})
            app4.component('site-name', {
              props: ['title'],
              template: `<h4>{{ title }}</h4>`
            })   
            app4.mount('#app4')

            const something = {
                data(){
                    return{
                        sites:[
                            { id: 1, title: 'Google' },
                            { id: 2, title: 'Runoob' },
                            { id: 3, title: 'Taobao' }
                        ]
                    }
                }
            }
            const app5 = Vue.createApp(something);
            app5.component('custom6',{
                props: ['id','title'],
                template: `<h4>{{ id }} - {{ title }}</h4>`
            })
            app5.mount('#app5')
        })
    </script>
</head>
<body>
<div id='app'>
    <custom></custom>
</div>
<div id='app2'>
    <custom2></custom2>
    <custom2></custom2>
    <custom2></custom2>
</div>
<div id='app3'>
    <custom3></custom3>
    <custom4></custom4>
    <custom5></custom5>
</div>
<div id="app4">
  <site-name title="Google"></site-name>
  <site-name title="Runoob"></site-name>
  <site-name title="Taobao"></site-name>
</div>
<div id="app5">
    <custom6 v-for='site in sites' :id='site.id' :title='site.title'></custom6>
</div>
</body>
</html>